<template>
    <div class="home-box" ref="homeSrcoll">
        <div>
            <loop-img :LoopImg="home.LoopImg"></loop-img>
            <main-types :mainTypes="home.mainTypes" :size="'20%'"></main-types>
            <section-title :sectionTitle="sectionTitle1"></section-title>
            <benefits :benefits="home.benefits"></benefits>
            <section-title :sectionTitle="sectionTitle2"></section-title>
            <main-types :mainTypes="home.hotTypes" :size="'25%'"></main-types>
            <section-title :sectionTitle="sectionTitle3"></section-title>
            <guessLike :guessLike="home.guessLike"></guessLike>
        </div> 
    </div>
</template>

<script>
import BScroll from 'better-scroll';
import LoopImg from '../components/LoopImg';
import mainTypes from '../components/mainTypes';
import sectionTitle from '../components/SectionTitle';
import benefits from '../components/benefits';
import guessLike from '../components/GuessLike';

import {mapState,mapMutations,mapActions} from 'vuex';

export default {
    components:{
        LoopImg,
        mainTypes,
        sectionTitle,
        benefits,
        guessLike,
    },
    computed:{
        ...mapState(["home"]),
    },
    data(){
        return {
            sectionTitle1:"超实惠直达",
            sectionTitle2:"热门分类",
            sectionTitle3:"猜你喜欢",
           
        }
    },
    methods:{
        initScroll(){
            setTimeout(()=>{
                new BScroll(this.$refs.homeSrcoll,{click:true});
            },100)
        },
        ...mapActions(["loadHomePage","guessLikeData"]),
    },
    mounted(){
        this.initScroll();
        this.loadHomePage();
        this.guessLikeData();
        // this.$store.dispatch("loadHomePage");
    }
}
</script>

<style lang="less" scoped>
.home-box{
    position: absolute;
    top: @h;
    bottom: @h;
    width: 100%;
}
</style>

